<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<title>基地登录</title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/base/commonality.css"/>
		<link rel="stylesheet" type="text/css" href="../css/base/base_login.css"/>
	</head>
	<body>
		<header>
			
			<!-- 头部暂时不用写 -->
			<div class="childrenBox">
				<h1 id="head">河南省研学实践综合管理平台</h1>
				<div id="head-img">
					<div id="head-registry">
						<img class="head-imgs" src="../img/base/图标 1.svg"/>
					<span>
						<a href="/stuUser/toRegister" style="color: gray;">立即注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
					</span>
					</div>
					<div id="head-login">
						<img class="head-imgs" src="../img/base/图标 1 (1).svg"/>
						<span>
							<a style="color: gray;">立即登陆</a>
						</span>
					</div>
				</div>
			</div>
		</header>
		<section>
			
			<!-- 内容部分 -->
			<div id="loginway">
				<div id="emaillogintitle">
					邮箱登录
				</div>
				<div id="phonelogintitle">
					手机验证码登录
				</div>
				<div id="wire">
					
				</div>
			</div>
			<div id="emaillogin">
				<form action="/stuUser/doLogin" method="post" class="res-form">
					<table>
						<tr><td class="from-td"><input type="text" name="uMailbox" id="email" placeholder="邮箱"/>
						<tr><td class="from-td"><input type="password" name="uPwd" id="password" placeholder="6-16位密码，区分大小写"/></td></tr>
					</table>
					<input type="submit" id="doLogin" value="登录" />
					<div class="input-group" style="width: 250px;">
						<span style="color: red;" th:text="${msg}"></span>
					</div>
				</form>
			</div>
			<div id="phonelogin" style="display: none;">
				<form action="/stuUser/doLogin" method="post" class="res-form">
					<table>
						<tr><td class="from-td"><input type="text" name="uPhone" id="phone" placeholder="11位手机号" /></td></tr>
						<tr><td class="from-td"><input type="text" name="verification" id="verification" placeholder="输入验证码" onchange="quicknew()"/>
							<span class="input-group-btn"><a class="btn btn-default" id="verify" >获取验证码</a></span>
					</table>
					<input type="submit" id="doLogin" value="登录" />
					<div class="input-group" style="width: 250px;">
						<span style="color: red;" th:text="${msg}"></span>
					</div>
				</form>
			</div>
		</section>
		<footer>
			尾部
		</footer>
		
		
		<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
		<script src="../js/bootstrap.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/base/base_register.js"></script>
	</body>
	<script>
		//校验邮箱
		function checkEmail() {
			//1.获取邮箱
			var email = $("#email").val();
			//2.定义正则		itcast@163.com
			var reg_email = /^\w+@\w+\.\w+$/;
			//3.判断
			var flag = reg_email.test(email);
			if (flag) {
				$("#email").css("border", "");
			} else {
				$("#email").css("border", "1px solid red");
			}
			return flag;
		}
		//校验手机号
		function checkTelephone() {
			var telephone = $("#phone").val();
			var flag = false;
			var reg_phone = /^1[3-9]+\d{9}$/;
			if (reg_phone.test(telephone)) {
				$("#phone").css("border", "");
				flag = true;
			} else {
				$("#phone").css("border", "1px solid red");
			}
			return flag;
		}
		//校验验证码
		function checkCode() {
			var check = $("#verification").val();
			var flag = false;

			if (check == "") {
				$("#verification").css("border", "1px solid red");
			} else {
				$("#verification").css("border", "");
				flag = true;
			}
			return flag;
		}
		//校验密码
		function checkPassword(){
			var check=$("#password").val();
			var flag=false;
			var re_password=/^[0-9a-zA-Z]{6,12}$/;
			
			if(re_password.test(check)){
			 $("#password").css("border", "");
				flag = true;
			} else {
				$("#password").css("border", "1px solid red");
			}
			return flag;
			
		}



		$("#verify").unbind('click').bind('click',function(){
			time(this);
			$.ajax({
				url:'/sendSms',
				data:"uPhone="+$("#phone").val(),
				dataType:"json",

			})
		});
		var waitTime = 60;
		function time(ele) {
			if (waitTime == 0) {
				ele.disabled = false;
				waitTime = 60;// 恢复计时
			} else {
				ele.disabled = true;
				ele.innerHTML = waitTime + "秒后重新发送";
				waitTime--;
				setTimeout(function () {
					time(ele)// 关键处-定时循环调用
				}, 1000)
			}

		}

		function quicknew(value) {
			timer = setTimeout(function () {
				$.ajax({
					url:'/doverifi',
					data:"verification="+$("#verification").val()+"&uPhone="+$("#phone").val(),
					dataType:"json",
					success:function (data) {
						if (data.result=="fail"){
							alert("验证码输入错误，重新核对");
						}
					}
				})
			},200)

		}







		$("#password").blur(checkPassword);
		$("#email").blur(checkEmail);
		$("#phone").blur(checkTelephone);
		$("#verification").blur(checkCode);
		
		
		
		
		
		
		
		// 邮箱登录和手机验证登录的切换
		$("#phonelogintitle").click(function() {
			$(this).css({"color":"black"});
			$("#emaillogintitle").css({"color":"#9D9D9D"});
			$("#wire").css({"left":"220px","transition":"all 0.5s linear"});
			$("#emaillogin").css({"display":"none"});
			$("#phonelogin").css({"display":"block"});
		});
		$("#emaillogintitle").click(function() {
			$(this).css({"color":"black"});
			$("#phonelogintitle").css({"color":"#9D9D9D"});
			$("#wire").css({"left":"60px","transition":"all 0.5s linear"});
			$("#emaillogin").css({"display":"block"});
			$("#phonelogin").css({"display":"none"});
		});
	</script>
	
</html>
